import React, { useState } from 'react';
import { Button, Input } from 'antd';
import { SendOutlined } from '@ant-design/icons';

const { TextArea } = Input;

interface InputAreaProps {
  onSendMessage: (message: string) => void;
}

const InputArea: React.FC<InputAreaProps> = ({ onSendMessage }) => {
  const [messageInput, setMessageInput] = useState('');
  const [isFocused, setIsFocused] = useState(false);

  const handleSend = () => {
    if (messageInput.trim() === '') return;
    onSendMessage(messageInput);
    setMessageInput('');
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="input-area" style={{
      position: 'relative',
      width: '100%',
      maxWidth: '800px',
      margin: '0 auto'
    }}>
      <TextArea
        value={messageInput}
        onChange={(e) => setMessageInput(e.target.value)}
        onKeyDown={handleKeyPress}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        placeholder="发送消息给 Claude..."
        rows={1}
        style={{
          width: '100%',
          background: isFocused ? 'rgba(255, 255, 255, 0.15)' : 'rgba(255, 255, 255, 0.1)',
          color: '#fff',
          border: 'none',
          borderRadius: '12px',
          resize: 'none',
          fontSize: '16px',
          padding: '16px 50px 16px 20px',
          transition: 'all 0.3s ease',
          boxShadow: isFocused ? '0 0 0 2px rgba(255, 255, 255, 0.1)' : 'none'
        }}
      />
      <Button
        type="text"
        icon={<SendOutlined style={{ fontSize: '20px' }} />}
        onClick={handleSend}
        style={{
          position: 'absolute',
          right: '12px',
          top: '50%',
          transform: 'translateY(-50%)',
          color: messageInput.trim() ? '#fff' : 'rgba(255, 255, 255, 0.5)',
          fontSize: '20px',
          border: 'none',
          background: 'transparent',
          transition: 'all 0.3s ease',
          padding: '8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
        disabled={!messageInput.trim()}
      />
    </div>
  );
};

export default InputArea;